<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-20 09:12:05
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-30 18:27:24
 * @FilePath: \ProtocolTool\src\renderer\src\components\TextDataBox\index.vue
-->
<script lang="ts" setup>
import Simplebar from 'simplebar-vue'
import 'simplebar-vue/dist/simplebar.min.css'

import dayjs from 'dayjs'

defineProps({
  list: {
    type: Array<any>,
    default: () => []
  }
})
</script>

<template>
  <Simplebar class="list">
    <TransitionGroup name="list">
      <div v-for="item in list" :key="item.id" class="item">
        <div class="date">{{ dayjs(item.time).format('YYYY-MM-DD HH:mm:ss') }}</div>
        <a-divider orientation="left" class="box"> 结果信息 </a-divider>
        <a-card>
          <div
            :class="{
              'title-success': item?.resultStatus === 200,
              'title-fail': item?.resultStatus !== 200
            }"
          >
            {{ item.msg }}
          </div>
          <!-- <div class="title">{{ item?.resultStatus }}</div> -->
        </a-card>
        <a-divider orientation="left" class="box"> 请求指令 </a-divider>
        <div class="data">
          <div class="textBox" v-html="item.requestData"></div>
        </div>
        <a-divider orientation="left" class="box"> 响应数据 </a-divider>
        <div class="data">
          <div class="textBox" v-html="item.data"></div>
        </div>
      </div>
      <div v-if="!list.length" class="empty">
        <a-empty />
      </div>
    </TransitionGroup>
  </Simplebar>
</template>

<style lang="less" scoped>
.list {
  height: 100%;
  padding-top: 30px;
  background: #f9fafd;
  border: 1px solid #eee;
  border-radius: 4px;

  .item {
    width: fit-content;
    min-width: 480px;
    max-width: calc(100% - 60px);
    background: #edeef3;
    margin: 0 30px 20px;
    padding: 8px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;

    .date {
      color: #268bd2;
      font-size: 14px;
    }
    .title {
      font-size: 13px;
      color: #666;
      margin: 3px 0 5px;
    }

    .title-fail {
      font-size: 13px;
      color: #fa5b45;
      margin: 3px 0 5px;
    }
    .title-success {
      font-size: 13px;
      color: #21ca64;
      margin: 3px 0 5px;
    }

    .data {
      font-size: 12px;
      border-radius: 3px;
      overflow: hidden;

      .textBox {
        padding: 10px;
        background: #fafafa;
        color: #657b83;
        text-wrap: unrestricted;
        word-break: break-all;
      }
    }
  }

  .empty {
    margin-top: 10%;
  }
}

.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 1s ease;
}

.list-enter-from {
  opacity: 0;
  transform: scale(0.1) translateX(-500px);
}

.list-leave-to {
  opacity: 0;
  transform: translateX(500px);
}

.list-leave-active {
  position: absolute;
}

.box {
  font-size: 13px;
  margin: 5px 0;
  color: #777777;
  font-weight: 700;
}
:deep(.ant-card-body) {
  padding: 7px;
}
:deep(.ant-card) {
  border-radius: 4px;
}
</style>
